<template>
	<uni-popup :custom="true" type="bottom" ref="keyboardPackage">
		<view class="keyboardbox">
			<view class="showMoney">
				<text class="moneyText">¥{{shifujine}} </text><text class="moneyTitle">码上结账</text>
			</view>
			<view class="numkeyboard" v-if="type==='number'">
				<view class="num-area">
					<view class="row" v-for="(item,index) in numKeybordList" :key="index">
						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
						 hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
					</view>
				</view>
				<view class="btn-area">
					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
						删除
					</view>
					<!-- <view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm"> -->
					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
						立即支付
					</view>
				</view>
			</view>
			
		</view>
		<view class="safe-area" v-if="safeAreaInsetBottom"></view>
	</uni-popup>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPopup
		},
		props: {
			type: {
				type: String,
				default: 'number'
			},
			safeAreaInsetBottom: { //是否设置安全区
				type: Boolean,
				default: false
			},
			disableDot: { //数字键盘是否禁止点击.仅type为number生效
				type: Boolean,
				default: false
			},
			shifujine:{ 
				type: Number,
				default:0
			},
			yourMoney:{
				type:Number
			},
			member:[]
		},
		data() {
			return {
				numKeybordList: [
					[1, 2, 3],
					[4, 5, 6],
					[7, 8, 9],
					[0, '.']
				],
				active: 1
			};
		},
		methods: {
			open() {
				this.$refs.keyboardPackage.open();
			},
			confirm() {
				if (!this.yourMoney) {
					uni.showToast({
						icon: 'none',
						title: '请先填写金额'
					})
					return false
				}
				if (this.yourMoney < 1) {
					uni.showToast({
						icon: 'none',
						title: '金额最少是1元'
					})
					return false
				}
				if (this.member.isPlus === '0') {
					if (this.jhhy === false && this.jhplushy === false) {
						uni.showToast({
							icon: 'none',
							title: '目前您的身份不是会员，请先选择您要开通的身份，普通会员或者plus会员'
						})
						return false
					}
				}
				uni.showLoading({
					title: '正在支付中....'
				})
				const id = this.ordersId
				let rate = 1
				if (this.member.isPlus === '2') {
					rate = JSON.parse(this.store.rate).vip2
				} else if (this.member.isPlus === '1') {
					rate = JSON.parse(this.store.rate).vip1
				} else if (this.member.isPlus === '0') {
					if ((this.jhhy === false) && (this.jhplushy === false)) { // 啥也不开通
						rate = 1
					} else if ((this.jhhy === true) && (this.jhplushy === false)) { // 开通普通会员
						rate = JSON.parse(this.store.rate).vip1
					} else if ((this.jhhy === false) && (this.jhplushy === true)) { // 开通plus会员
						rate = JSON.parse(this.store.rate).vip2
					}
				}
				const payment = 10
				const openId = uni.getStorageSync('openId')
				
				let price = 0
				let payAmount = 0
				if (this.member.isPlus === '2') {
					price = new BigNumber(this.yourMoney).toFixed(2, 2);
					payAmount = new BigNumber(this.yourMoney).multipliedBy(new BigNumber(rate)).toFixed(2, 2);
				} else if (this.member.isPlus === '1') {
					price = new BigNumber(this.yourMoney).toFixed(2, 2);
					payAmount = new BigNumber(this.yourMoney).multipliedBy(new BigNumber(rate)).toFixed(2, 2);
				} else {
					if ((this.jhhy === false) && (this.jhplushy === false)) {
						price = new BigNumber(this.yourMoney).toFixed(2, 2);
						payAmount = new BigNumber(this.yourMoney).multipliedBy(new BigNumber(rate)).toFixed(2, 2);
					} else if ((this.jhhy === true) && (this.jhplushy === false)) {
						price = new BigNumber(this.yourMoney).plus(new BigNumber(1)).toFixed(2, 2);
						payAmount = new BigNumber(this.yourMoney).multipliedBy(new BigNumber(rate)).plus(new BigNumber(1)).toFixed(2, 2);
					} else if ((this.jhhy === false) && (this.jhplushy === true)) {
						price = new BigNumber(this.yourMoney).plus(new BigNumber(199)).toFixed(2, 2);
						payAmount = new BigNumber(this.yourMoney).multipliedBy(new BigNumber(rate)).plus(new BigNumber(199)).toFixed(2, 2);
					}
				}
				const obj = {}
				if (id) {
					obj.ordersId = id
				}
				if (payAmount) {
					obj.payAmount = payAmount
				}
				if (rate) {
					obj.rate = rate
				}
				if (payment) {
					obj.payment = payment
				}
				if (openId) {
					obj.openId = openId
				}
				if (price) {
					obj.price = price
				}
				if (this.member.isPlus === '0') {
					if ((this.jhhy === true) && (this.jhplushy === false)) {
						obj.remark = 'vip1'
					} else if ((this.jhhy === false) && (this.jhplushy === true)) {
						obj.remark = 'vip2'
					}
				}
				
				let myOrdersId = obj.ordersId
				uni.setStorageSync('myOrdersId', myOrdersId)
				uni.request({
					url: `${config.api_base_url}orders/pay/pay`,
					header: {
						'Content-Type': 'application/json'
					},
					method: 'POST',
					data: obj,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							setTimeout(() => {
								uni.hideLoading()
								jweixin.chooseWXPay({
									timestamp: data.timeStamp, // 支付签名时间戳
									nonceStr: data.nonceStr, // 支付签名随机串，不长于32 位
									package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
									signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: data.paySign, // 支付签名
									success: ((res) => {
										uni.navigateTo({
											url: `../paysuccess/paysuccess?storeId=${this.storeId}&payAmount=${payAmount}`
										})
									}),
									fail: ((err) => {
										uni.hideLoading()
										console.log(err)
									}),
									cancel: (() => {
										uni.hideLoading()
									}),
									complete: (() => {
										uni.hideLoading()
									})
								})
							}, 2222)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.flag
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					})
				})
				
			},
			deleteVal() {
				this.$emit('onDelete');
			},
			input(val) {
				// if (val === '.' && this.disableDot) return;
				this.$emit('onInput', val);
			},
			close() {
				this.$refs.keyboardPackage.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.keyboardbox {
		background-color: #FFFFFF;
		.showMoney{
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #F02230;
			font-weight: bold;
			.moneyText{
				font-size: 32rpx;
			}
			.moneyTitle{
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}
			
		.numkeyboard {
			height: 432rpx;
			display: flex;
			background-color: #ebedf0;

			.btn-area {
				width: 180rpx;
				height: 100%;
				display: flex;
				flex-direction: column;

				.item {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-grow: 1;
				}

				.del {
					background-color: #ebedf0;
					color: #333;
					flex: 1;
					&.active {
						background-color: #f1f3f5;
					}
				}

				.confirem {
					background-color: #F02230;
					color: #FFFFFF;
					flex: 2;
					&.active {
						background-color: #0570db;
					}
				}
			}

			.num-area {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;

				.row {
					width: 100%;
					height: 25%;
					display: flex;
					margin-top: 1px;

					.item {
						flex-grow: 1;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						border-right: 1px solid #ebedf0;
						width: 33.33%;
						
						&.active {
							background-color: #ebedf0;
						}

						&.z {
							flex-grow: 2;
							width: 66.66%;
						}

						&.disabled {
							background: #FFFFFF;
							color: #B9B9B9;
						}
					}
				}

			}
		}
	}

	.safe-area {
		padding-bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

		
	
</style>
